import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import List from '../list/List'
import Radio from './Radio';

const ListItem = List.Item;
const refRadio = 'radio';


export default class RadioItem extends React.Component {

  handleClick = () => {
    const radio = this.refs[refRadio];
    radio.handleClick();
  }

  render() {
    const {
      style,
      radioStyle,
      defaultChecked,
      checked,
      disabled,
      children,
      onChange,
    } = this.props;
    let contentDom = null;
    if (children && React.isValidElement(children)) {
      contentDom = <View style={{flex: 1}}>{children}</View>;
    } else {
      const contentStyle = [
        styles.radioItemContent,
        disabled ? styles.radioItemContentDisable : {},
      ];
      contentDom = (
        <Text style={contentStyle} numberOfLines={1}>
          {this.props.children}
        </Text>
      );
    }

    const radioEl = (
      <Radio
        ref={refRadio}
        style={radioStyle}
        defaultChecked={defaultChecked}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
      />
    );

    return (
      <ListItem
        style={style}
        onClick={disabled ? undefined : this.handleClick}
        extra={radioEl}
      >
        {contentDom}
      </ListItem>
    );
  }
}
const styles = StyleSheet.create({
  radioItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  radioItemRadio: {
    marginLeft: 15,
    marginRight: 8,
  },
  radioItemContent: {
    color: '#000',
    fontSize: 17,
  },
  radioItemContentDisable: {
    color: '#bbbbbb',
  },
})
